<template>
    <div class="degree-list">
        <div class="option">
            <span
                class="opt-a opt-btn btn-hover"
                @click="addReach"
            >
                添加考核项
            </span>
            <el-button
                round
                size="small"
                class="opt-btn btn-hover"
                @click="openDialog"
            >
                设置权重
            </el-button>
            <router-link
                class="opt-left opt-btn btn-hover"
                tag="span"
                :to="`/Teaching/MyCourses/Statistics/Teach/CourseReachInfo/${id}#reachTable`"
            >
                返回统计表
            </router-link>
        </div>
        <el-table
            :data="tableData"
            style="width: 100%"
        >
            <el-table-column
                type="index"
                :index="indexMethod"
                width="100"
                label="序号">
            </el-table-column>
            <el-table-column
                prop="name"
                label="考核项"
                width="180">
            </el-table-column>
            <el-table-column
                prop="weight"
                label="权重">
            </el-table-column>
            <el-table-column
                prop="subStrs"
                label="考核分项">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="text"
                        @click="edit(scope.row)"
                    >
                        查看/修改
                    </el-button>
                    <el-button
                        size="mini"
                        type="text"
                        @click="del(scope.row)"
                    >
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>

        <tipsDialog
            ref="tipsDialog"
            @sure="callBack"
        />

        <weightDialog
            ref="weightDialog"
            @refresh="getList"
        />
    </div>
</template>

<script>
import tipsDialog from '../../../../../../components/tipsDialog';
import weightDialog from './setWeightDialog';
import { checkList, delCheck } from '../../../../../../api/courseReach';
export default {
    components: {
        weightDialog,
        tipsDialog
    },
    data() {
        return {
            id: null,
            pageNum: 1,
            tableData: [],
            removeId: null
        }
    },

    created() {
        this.id = this.$route.query.id;
        this.getList();
    },

    methods: {
        getList() {
            checkList({
                concludeId: this.id
            }).then((res) => {
                this.tableData = res.data;
            })
        },
        openDialog() {
            if (this.tableData.length) {
                this.$refs.weightDialog.init(JSON.stringify(this.tableData, ['id','name', 'weight']));
            } else {
                this.$message.error('暂无考核项设置权重！');
            }

        },
        indexMethod(index) {
            return (this.pageNum  - 1) * 10 + index + 1;
        },
        del(data) {
            const { weight, id } = data;
            if (weight && this.tableData.length > 1) {
                this.$refs.weightDialog.init(JSON.stringify(this.tableData, ['id','name', 'weight']), id);
            } else {
                this.removeId = id;

                this.$refs.tipsDialog.init({
                    type: 'error',
                    info: '是否删除选中'
                });
            }
        },

        edit(data) {
            const { id, concludeId } = data;
            this.$router.push({
                name: 'SetReach',
                query: { id, cid: concludeId }
            });
        },

        addReach() {
            if (this.tableData.length == 10) {
                this.$message.warning('考核项最多10条！');
                return false;
            }

            this.$router.push({
                name: 'SetReach',
                query: { cid: this.id }
            });
        },

        callBack() {
            delCheck({ id: this.removeId }).then((res) => {
                this.getList();
            });
        }
    }
}
</script>

<style lang="scss">
.degree-list {
    .el-table__body tr:hover>td{
        background-color: #f0f8ff!important;
    }

    .el-table__body tr.current-row>td{
        background-color: #f0f8ff!important;
    }
    .el-button--text {
        span:hover {
            color: #1277eb !important;
        }
    }
}

</style>

<style lang="scss" scoped>
.degree-list {
    width: 1200px;
    margin: 0 auto 30px auto;
    min-height: 400px;
    box-sizing: border-box;
    box-shadow: 0 10px 10px rgba(0,0,0,0.05);
    background: #fff;
    padding: 14px 41px 40px;
    border-radius: 0 0 5px 5px;
    .option {
        text-align: right;
        margin-bottom: 20px;

        .opt-btn {
            color: #1277EB;
            font-size: 14px;
            font-weight: 400;
            border-color: #1277EB;
            padding: 8px 19px;
        }

        .opt-a {
            box-sizing: border-box;
            border-radius: 20px;
            border: 1px solid #1277EB;
            display: inline-block;
            height: 32px;
            margin-right: 10px;
            cursor: pointer;
            vertical-align: middle;
        }

        .opt-left {
            box-sizing: border-box;
            border-radius: 20px;
            border: 1px solid #1277EB;
            display: inline-block;
            height: 32px;
            margin-left: 10px;
            cursor: pointer;
            vertical-align: middle;
        }
    }

    .btn-hover:hover {
        background: #1277eb;
        color: #fff;
    }
}
</style>
